﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/jquery-easyui-1.7.6/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery-easyui-1.7.6/themes/icon.css" rel="stylesheet" />
    <script src="~/jquery-easyui-1.7.6/jquery.min.js"></script>
    <script src="~/jquery-easyui-1.7.6/jquery.easyui.min.js"></script>
    <script src="~/jquery-easyui-1.7.6/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <table id="dg"></table>
    </div>
    <div id="ddAdd">
        @using (Html.BeginForm("",""))
        {

        }
    </div>
    <script>
        $(function () {
            $('#dg').datagrid({
                idField: "id",
                url: '/Home/PhoneData',//设置数据源地址
                fitColumns: true,//自动撑满表格
                loadMsg: '数据加载提示',
                //配置表头及表格数据绑定
                columns: [[
                    { field: 'ck', checkbox: true, width: 100 },//添加复选框字段
                    { field: 'id', title: '编号', width: 100 },
                    { field: 'name', title: '名称', width: 100 },
                    { field: 'price', title: '价格', width: 100, formatter: PriceForm },
                    //formatter 格式化函数
                    { field: 'img', title: '图片', width: '100', formatter: imgForm }
                ]],
                toolbar: [{
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        //$.messager.alert("提示", "添加");
                        $('#ddAdd').dialog({
                            title: '添加手机信息',
                            width: 400,
                            height: 200,
                            closed: false,
                            cache: false,
                            modal: true,
                            buttons: [{
                                text: '保存',
                                iconCls: 'icon-save',
                                handler: function () { alert(1) }
                            }, {
                                text: '关闭',
                                iconCls: 'icon-cancel',
                                handler: function () { $('#ddAdd').window('close'); }
                            }]
                        });

                    }
                }, '-', {
                    iconCls: 'icon-remove',
                    text: '删除',
                    handler: del
                }, '-', {
                    text: '刷新',
                    iconCls: 'icon-reload',
                    handler: function () {
                        $("#dg").datagrid("reload");//实现刷新栏目中的数据
                    }
                }],
                singleSelect: true//是否只选择一行
            });

        });

        //格式化产品价格
        function PriceForm(value, row, index) {
            return "<span style='font-weight:bold'>￥ " + row.price + " 元</span>";
        }

        //格式化产品图片 value:字段值；rowData：行记录数据；rowIndex：行索引
        function imgForm(value, row, index) {
            return "<img src='" + row.img + "' alt='" + row.name + "' width='200' height='200'/>"
        }

        //删除
        function del() {
            var checkedItems = $("#dg").datagrid("getChecked");
            if (checkedItems.length > 0) {
                $.each(checkedItems, function (index, item) {
                    $.messager.confirm('确认', '您确认想要删除记录吗？', function (r) {
                        if (r) {
                            $.ajax({
                                url: '/Home/Delete?delId=' + item.id,
                                method: '',
                                success: function (result) {
                                    if (result.code == "0") {
                                        $("#dg").datagrid("reload")//删除成功后，刷新表格
                                        $.messager.alert('提示', '删除成功');
                                    } else {
                                        $.messager.alert('提示', '删除失败');
                                    }
                                }
                            });
                        }
                    });
                })
            }

        }
    </script>

</body>
</html>
